<template>
           <div class="box">
               <header>
                      <img class="kbbimg" :src="kbb" alt="">
                      <span class="username" @click="login">{{name}}</span>      
               </header>
               <main>
                       <div class="top">
                            <router-link :to="{name:'confirmed'}" tag="nav">
                                 <img :src="nav2" alt="">
                                 <span>待确认</span>
                            </router-link>
                            <router-link :to="{name:'inpayment'}" tag="nav">
                                 <img :src="nav3" alt="">
                                 <span>还款中</span>
                            </router-link>
                            <router-link :to="{name:'all'}" tag="nav">
                                 <img :src="nav4" alt="">
                                 <span>全部订单</span>
                            </router-link>
                       </div>
                       <div class="bottom">
                             <ul>
                                <router-link tag="li" :to="{}" >
                                    <img class="list" :src="list1" alt="">
                                    <h5>我的商城</h5>
                                    <i class="iconfont icon-you"></i>  
                                </router-link>
                                <li tag="li" @click="mybank">
                                    <img class="list" :src="list2" alt="">
                                    <h5>我的银行卡</h5>
                                    <i class="iconfont icon-you"></i>  
                                </li>
                                <router-link tag="li" :to="{name:'nottice'}" >
                                    <img class="list" :src="list5" alt="">
                                    <h5>公告</h5>
                                    <i class="iconfont icon-you"></i>  
                                </router-link>
                                <router-link tag="li" :to="{name:'kefu'}" >
                                    <img class="list" :src="list4" alt="">
                                    <h5>帮助与客服热线</h5>
                                    <i class="iconfont icon-you"></i>  
                                </router-link>
                                 <router-link tag="li" :to="{name:'system'}" >
                                    <img class="list" :src="list3" alt="">
                                    <h5>系统设置</h5>
                                    <i class="iconfont icon-you"></i>  
                                </router-link>
                             </ul>
                       </div>
               </main>
               <h1 style="width:100%;height:2.02rem;"></h1>
              <bottom />
           </div>
</template>

<script>
import bottom from "@/components/footer"
import kbb from "@/assets/img/headimg.jpg"
import nav1 from '@/assets/img/grzx_06.jpg'
import nav2 from '@/assets/img/grzx_08.jpg'
import nav3 from '@/assets/img/grzx_10.jpg'
import nav4 from '@/assets/img/grzx_03.jpg'
import list1 from '@/assets/img/sz_03.gif'
import list2 from '@/assets/img/sz_07.gif'
import list3 from '@/assets/img/sz_09.jpg'
import list4 from '@/assets/img/sz_12.gif'
import list5 from '@/assets/img/gg_03.jpg'
import { userInfo } from 'os';


export default {
        data(){
            return{
               kbb,
               nav1,
               nav2,
               nav3,
               nav4,
               list1,
               list2,
               list3,
               list4,
               list5,
               name:"请登录"
            }
        },
       components:{
           bottom,
       },
       methods:{
            login(){
               if(this.name=="请登录"){
                  this.$router.push({name:'login'})
            }
           },  
           mybank(){
               var userInfo = JSON.parse(localStorage.getItem('userInfo'))
               if(!userInfo){
                   this.$router.push({name:'login'})
               }else{
               	this.$router.push({name:'mybankcard'})
               }
            }
       },
       mounted(){
           if(localStorage.getItem('userInfo')!== null){
              var userdata = JSON.parse(localStorage.getItem('userInfo'))
              this.name = userdata.phone
              
           }
           
       }
}
</script>

<style lang="less" scoped>
          /**{ touch-action: none; }*/
        .box{
           width:100%;
           height:100%;
           display:flex;
           flex-direction:column;
        }
         header{
            width:100%;
            height:6rem;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            background: #5bd6ff; /* Old browsers */
            background: -moz-linear-gradient(top, #5bd6ff 0%, #2989d8 100%, #207cca 100%, #0eb0e7 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #5bd6ff 0%,#2989d8 100%,#207cca 100%,#0eb0e7 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #5bd6ff 0%,#2989d8 100%,#207cca 100%,#0eb0e7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bd6ff', endColorstr='#0eb0e7',GradientType=0 ); /* IE6-9 */
         }
         .kbbimg{
            width:3rem;
            height:3rem;
            border-radius:3rem;
            margin-bottom:0.5rem;
         }
         .username{
             font-size:0.5rem;
             color:#fff;
         }
         main{
            width:100%;
            flex:1;
            background:#f5f5f5;
            padding-top:0.62rem; 
         }
         .top{
            width:90%;
            display:flex;
            height:3.04rem;
            background:#fff;
            position: relative;
            left:0;
            right:0;
            margin:0 auto;
            border-radius:0.15rem;
            margin-bottom:0.62rem;
         }
         nav{
            width:33.3%;
            display:flex;
            flex-direction:column;
            justify-content:center;
                 img{
                    width:1.12rem;
                    height:1.27rem;
                    position: relative;
                    left:0;
                    right:0;
                    margin:0 auto;
                 }
                 span{
                    position: relative;
                    left:0;
                    right:0;
                    margin:0 auto;
                 }
         }
         .bottom{
            width:90%;
            height:10.3rem;
            background:#fff;
            border-radius:0.15rem;
            position: relative;
            left:0;
            right:0;
            margin:0 auto;
         }
         li{
            width:100%;
            height:2.08rem;
            border-bottom:0.04rem solid #f3f3f3;
            padding-left:5%;
            display:flex;
           align-items:center;
         }
      .list{
              width:0.83rem;
              height:0.84rem;
              margin-right:8%;
         }
        h5{
           font-size:0.56rem;
           color:#333333;
           font-weight:500;
        }
        i{
           color:#d4d4d4;
           position: absolute;;
           right:5%;                                                         
           
        }       
</style>

